import React from 'react';
import { Button, Row, Col, message, Tooltip, Select, Input } from 'antd';
import CommonListsIndex from '../../../../components/CommonLists/index';
import Modal from '../../../../components/Modal/index';
import SortAdd from './add';
import SortList from './list';
import './index.less';

class SortIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'sort';
    this.listsComponent = SortList;
    this.model_width = 500;
  }
  componentDidMount() {
    this.freshQueryList();
  }

  //打开添加分类的弹窗
  add = () => {
    const addModal = Modal.open({
      title: '添加分类',
      width: 500,
      content: (
        <SortAdd actionType='add' freshQueryList={this.freshQueryList} closeModal={() => Modal.close(addModal)} />
      ),
      isOkBtn: false,
      maskClosable: false,
      isCancelBtn: false,
    });
  };

  render() {
    const { closeModal } = this.props;
    const ListsComponent = this.listsComponent;

    return (
      <div className='sort'>
        <div className='inner-content'>
          <Row type='flex' justify='space-between' align='middle' className='pb-10'>
            <Col span={6} style={{ textAlign: 'middle' }}>
              <Button type='primary' onClick={this.add}>
                添加分类
              </Button>
            </Col>
          </Row>
          <ListsComponent
            {...this.state}
            rowKey='id'
            edit={this.edit}
            queryList={this.freshQueryList}
            onChangePagination={this.onChangePagination}
          />
        </div>
        <div className='form-btn'>
          <Button type='primary' onClick={closeModal} className='login-form-button' autoFocus={true}>
            确定
          </Button>
        </div>
      </div>
    );
  }
}

export default SortIndex;
